/*
 * @Description: 底部按钮
 * @Author: yingying.fan
 * @Date: 2019-07-01 12:56:48
 * @Last Modified by: yingying.fan
 * @Last Modified time: 2019-07-01 12:56:48
 */
<template>
  <div class="bottom-main-wrapper">
    <div class="bottom-entry-list-wrapper">
      <div
        v-for="(item,index) in entryList"
        :key="`entry_${index}`"
        class="fontsize30 baseBgColorWithActive entry-wrapper"
        @click="clickEntry(item)"
      >
        <i
          class="iconfont"
          :class="item.icon"
        ></i>
        <span>{{item.text}}</span>
      </div>
      <p class="entry-divide-line"></p>
    </div>
    <p class="baseBgColorNoActive bottom-shadow"></p>
  </div>
</template>

<script>
export default {
  components: {

  },
  data() {
    return {
      entryList: [
        { icon: 'icon-xianlu', text: '路线', page: 'lineDetails.html?_tv=true' },
        { icon: 'icon-search', text: '搜索', page: 'SearchCar.html?_tv=false' }
      ]
    }
  },
  methods: {
    clickEntry(item) {
      if (item.page) {
        window.location.assign('xbapp://open/bus-app/' + item.page)
      }
    }
  }
}
</script>

<style>
.bottom-main-wrapper {
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0;
  z-index: 10;
  user-select: none;
}
.bottom-shadow {
  position: relative;
  top: -5px;
  width: 480px;
  height: 10px;
  border-radius: 16px;
  opacity: 0.5;
  filter: blur(10px);
  margin: auto;
}
.bottom-entry-list-wrapper {
  position: relative;
  width: 500px;
  height: 80px;
  line-height: 80px;
  margin: auto;
  border-radius: 16px;
  color: #ffffff;
  font-size: 0;
  text-align: center;
  overflow: hidden;
  /* box-shadow: 0px 5px 10px #28acff; */
}
.entry-wrapper {
  width: 50%;
  height: 100%;
  display: inline-block;
}
.entry-wrapper:active {
  background-color: #1386cf;
}
.entry-wrapper > i {
  font-size: 34px;
}
.entry-divide-line {
  display: block;
  width: 4px;
  height: 40px;
  background-color: #ffffff;
  margin: auto;
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  transform: scaleX(0.5);
}
</style>
